<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>账户管理</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <!--检索项-->
                            <div class="layui-form">
                                <a href="add.html" class="layui-btn">添加账户</a>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" id="name" name="name" placeholder="搜索员工名" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="group" name="group" style="layui-input-inline"
                                                onchange="reloadList()">
                                            <option value="0">选择分组</option>
                                            <option value="10">系统组</option>
                                            <option value="20">超级管理组</option>
                                            <option value="30">部门管理组</option>
                                            <option value="40">组级管理组</option>
                                            <option value="50">普员组</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="onStatus" name="onStatus" style="layui-input-inline"
                                                onchange="reloadList()">
                                            <option value="0">选择状态</option>
                                            <option value="10">在线</option>
                                            <option value="20">不在服务区</option>
                                            <option value="30">离线</option>
                                            <option value="40">登录失败</option>
                                            <option value="50">已登出</option>
                                        </select>
                                    </div>
                                </div>
                                <button class="layui-btn layui-btn-xs" onclick="reloadList();">搜索</button>
                                <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="reloadList(true);">
                                    重置
                                </button>
                            </div>
                            <!--表格内容区域-->
                            <table id="LAY-wechat-manage" lay-filter="LAY-wechat-manage"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="openAccountInfo">详情</a>
        <a class="layui-btn layui-btn-xs" lay-event="enterWorkbench">进入工作台</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delAccountInfo">删除</a>
    </script>
</div>
<div class="layui-tab" id="account_info" lay-filter="accountContent" style="display: none;">
    <ul class="layui-tab-title">
        <li lay-id="basic_info" class="layui-this">基本信息</li>
        <li>微信列表</li>
        <li>统计及日志</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <!--基本信息-->
            <div id="basic_info">
                <div class="layui-form layui-form-pane">
                    <div class="layui-row">
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">员工名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" autocomplete="off"
                                           class="layui-input" readonly>
                                </div>
                                <div class="layui-form-mid layui-word-aux">不可修改</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">微信数量</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="wxCount" autocomplete="off"
                                           class="layui-input" readonly>
                                </div>
                                <div class="layui-form-mid layui-word-aux">不可修改</div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="gender" autocomplete="off"
                                           placeholder="请输入用户名" class="layui-input" readonly>
                                </div>
                                <div class="layui-form-mid layui-word-aux">不可修改</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-inline">
                                    <textarea name="remarks" readonly class="layui-textarea"></textarea>
                                </div>
                                <div class="layui-form-mid layui-word-aux">不可修改</div>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="layui-bg-gray">
                <form action="" class="layui-form layui-form-pane">
                    <input type="hidden" name="id">
                    <div class="layui-row">
                        <div class="layui-col-xs4">
                            <div class="layui-form-item">
                                <label class="layui-form-label">设置密码</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="passwd" lay-verify="passwd" autocomplete="off"
                                           placeholder="请设置密码" class="layui-input" value="">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs3">
                            <div class="layui-form-item">
                                <label for="account" class="layui-form-label">冻结账户</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" id="account" checked="" lay-verify="status" name="status"
                                           value="10"
                                           lay-skin="switch" lay-text="冻结|解冻">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-xs5">
                            <div class="layui-form-item">
                                <label class="layui-form-label">修改分组</label>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select lay-verify="group" name="group" id="group_id"></select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br><br><br><br><br>
                    <div class="layui-col-xs12" style="text-align: center">
                        <a class="layui-btn" lay-submit lay-filter="formSubmit">确认修改</a>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-tab-item">
            <!--微信列表-->
            <div class="layui-row" id="wechat_list_wrap">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <!--表格内容区域-->
                        <table id="wechat_list" lay-filter="wechat_list"></table>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">
            <!--统计及日志-->
            <div class="layui-row" id="log_list_wrap">
                <!--表格内容区域-->
                <table id="log_list" lay-filter="log_list"></table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="headBar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchRemoveWeChat">移出</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchTransferWeChat">转移给指定员工</button>
    </div>
</script>
<script>
    var reloadList;
    var getSearchData;
    layui.use(['table', 'laytpl', 'form', 'laydate'], function () {
        var $ = layui.$
            , table = layui.table
            , form = layui.form
            , element = layui.element

        form.render()

        getSearchData = function () {
            var group = $('#group').find("option:selected").val();
            var onStatus = parseInt($('#onStatus').find("option:selected").val());
            var name = $('#name').val();
            return {
                group: group,
                onStatus: onStatus,
                name: name,
            }
        }

        table.render({
            elem: '#LAY-wechat-manage'
            , url: HOST + 'api/v1/accounts' //数据接口
            , method: 'post'
            , headers: {Authorization: layui.data("TOKEN").TOKEN}
            , contentType: 'application/json'
            , page: true //开启分页
            , where: getSearchData()
            , type: "POST"
            , loading: true
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: '用户ID'},
                {field: 'name', title: '用户名', sort: true},
                {field: 'gender', title: '性别', templet: '#genderTpl'},
                {field: 'wxCount', title: '微信数量'},
                {field: 'remarks', title: '备注'},
                {field: 'loginIp', title: '登录IP'},
                {fixed: 'right', align: 'center', width: 240, toolbar: '#barDemo'}
            ]]
            , defaultToolbar: ['filter', 'exports']
            , error: function (err) {
                if (err.code === 20002) {
                    layer.open({
                        type: 1,
                        title: false,//不显示标题栏
                        closeBtn: false,
                        area: '300px;',
                        shade: 0.8,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['重新登录'],
                        btnAlign: 'c',
                        moveType: 1,
                        content: '<div style="padding: 60px 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">您的登录信息已失效，请重新登录！</div>',
                        success: function (layero) {
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').attr({
                                href: '../login/login.html'
                            });
                        }
                    });
                } else {
                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                }
            }
        });

        //监听工具条
        table.on('tool(LAY-wechat-manage)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'openAccountInfo') { //账户页面
                service.get('api/v1/account/' + data.id + '').then((response) => {
                    if (response.code === 200) {
                        element.tabChange('accountContent', 'basic_info');
                        element.render('tab')
                        layer.open({
                            type: 1,
                            area: ['1200px', '700px'],
                            title: '基本信息',
                            content: $('#account_info'),
                            success: function () {
                                // 展示账户信息
                                var gender = ''
                                if (response.data.gender === 10) {
                                    gender = '男'
                                } else if (response.data.gender === 20) {
                                    gender = '女'
                                } else {
                                    gender = '未填'
                                }
                                $('#account_info input[name=id]').val(response.data.id)
                                $('#account_info input[name=name]').val(response.data.name)
                                $('#account_info input[name=gender]').val(gender)
                                $('#account_info input[name=wxCount]').val(response.data.wxCount)
                                $('#account_info textarea').val(response.data.remarks)
                            }
                        })
                        service.get('mfconfig').then((mfconfig) => {
                            if (mfconfig.data) {
                                mfconfig.data.forEach((e) => {
                                    if (e.id === 1) {
                                        var groups = JSON.parse(e.values)
                                        var html = '<option value="0">选择分组</option>'
                                        if (groups.length > 0) {
                                            groups.forEach(o => {
                                                if (o.id === data.groupId) {
                                                    html += '<option selected="selected" value=' + o.id + '>' + o.name + '</option>'
                                                } else {
                                                    html += '<option value=' + o.id + '>' + o.name + '</option>'
                                                }
                                            })
                                        }
                                        $('#group_id').html(html)
                                        form.render('select')
                                    }
                                })
                            } else {
                                layer.msg(mfconfig.msg, {offset: '45vh', icon: 5, time: 2000});
                            }
                        }).catch((configErr) => {
                            layer.msg(configErr.msg, {offset: '45vh', icon: 5, time: 2000});
                        })
                        //获取此账户下的微信列表
                        table.render({
                            elem: '#wechat_list'
                            , height: 550
                            , url: HOST + 'api/v1/wxinfos' //数据接口
                            , method: 'post'
                            , headers: {Authorization: layui.data("TOKEN").TOKEN}
                            , contentType: 'application/json'
                            , where: {user_id: parseInt(data.id)}
                            , id: 'wechat_list'
                            , toolbar: '#headBar'
                            , cols: [[ //表头
                                {type: 'checkbox', fixed: 'left'},
                                {field: 'nickName', title: '用户名', width: 300, sort: true},
                                {
                                    field: 'sex', title: '性别', width: 120, templet: function (row) {
                                        return row.sex === 0 ? '女' : '男'
                                    }
                                },
                                {field: 'mobile', title: '手机', width: 300}
                            ]]
                            , error: function (err) {
                                if (err.code === 20002) {
                                    layer.open({
                                        type: 1,
                                        title: false,//不显示标题栏
                                        closeBtn: false,
                                        area: '300px;',
                                        shade: 0.8,
                                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                                        btn: ['重新登录'],
                                        btnAlign: 'c',
                                        moveType: 1,
                                        content: '<div style="padding: 60px 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">您的登录信息已失效，请重新登录！</div>',
                                        success: function (layero) {
                                            var btn = layero.find('.layui-layer-btn');
                                            btn.find('.layui-layer-btn0').attr({
                                                href: '../login/login.html'
                                            });
                                        }
                                    });
                                } else {
                                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                                }
                            }
                        });
                        //获取操作日志
                        table.render({
                            elem: '#log_list'
                            , height: 550
                            , url: HOST + 'api/v1/syslog' //数据接口
                            , headers: {Authorization: layui.data("TOKEN").TOKEN}
                            , contentType: 'application/json'
                            , id: 'log_list'
                            , where: {page: 1, user_id: parseInt(data.id)}
                            , page: true //开启分页
                            , method: "POST"
                            , cols: [[ //表头
                                {field: 'id', title: '用户ID', width: 200, sort: true},
                                {field: 'username', title: '用户名'},
                                {field: 'action', title: '操作'},
                                {field: 'ipAddress', title: 'ip地址'},
                                {
                                    field: 'created_on', title: '操作时间', templet: function (row) {
                                        return parseTime(row.created_on)
                                    }
                                },
                            ]]
                            , error: function (err) {
                                if (err.code === 20002) {
                                    layer.open({
                                        type: 1,
                                        title: false,//不显示标题栏
                                        closeBtn: false,
                                        area: '300px;',
                                        shade: 0.8,
                                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                                        btn: ['重新登录'],
                                        btnAlign: 'c',
                                        moveType: 1,
                                        content: '<div style="padding: 60px 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">您的登录信息已失效，请重新登录！</div>',
                                        success: function (layero) {
                                            var btn = layero.find('.layui-layer-btn');
                                            btn.find('.layui-layer-btn0').attr({
                                                href: '../login/login.html'
                                            });
                                        }
                                    });
                                } else {
                                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                                }
                            }
                        })
                    } else {
                        layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                    }
                }).catch((err) => {
                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                })

            } else if (layEvent === 'delAccountInfo') {
                layer.confirm('确认要删除此账户吗？', function (index) {
                    service.delete('api/v1/account/' + data.id).then((response) => {
                        if (response.code === 200) {
                            layer.msg('删除成功', {offset: '45vh', icon: 1, time: 2000});
                            table.reload('LAY-wechat-manage', {
                                where: getSearchData()//设定异步数据接口的额外参数，任意设
                                , page: {
                                    curr: 1 //重新从第 1 页开始
                                }
                            });
                        } else {
                            layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                        }
                    }).catch((err) => {
                        layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                    })
                });
            } else if (layEvent === 'enterWorkbench') {
                layui.data('ACCOUNT_ID', {key: 'ACCOUNT_ID', value: data.id})
                window.open('../cs_work/index.html')
            }
        });

        //监听头工具栏
        table.on('toolbar(wechat_list)', function (obj) {
            var checkStatus = table.checkStatus('wechat_list');
            var layEvent = obj.event
            if (checkStatus.data.length > 0) {
                let currAccountId = parseInt(checkStatus.data[0].accountId)
                if (layEvent === 'batchRemoveWeChat') {  // 移出微信号
                    layer.confirm('确认将账户移出吗？', function (index) {
                        var data = checkStatus.data
                        var param = []
                        data.forEach(e => {
                            param.push(e.id)
                        })
                        service.post('api/v1/wxinfo/movewxinfo', {
                            accountId: -1,
                            searchWxinfoIds: param
                        }).then((response) => {
                            if (response.code === 200) {
                                layer.msg('移出成功', {offset: '45vh', icon: 1, time: 2000});
                                table.reload('wechat_list', {
                                    where: {user_id: currAccountId}//设定异步数据接口的额外参数，任意设
                                    , page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            } else {
                                layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                            }
                        }).catch((err) => {
                            layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                        })
                    });

                } else if (layEvent === 'batchTransferWeChat') {// 转移微信号
                    var data = checkStatus.data
                    var param = []
                    data.forEach(e => {
                        param.push(e.id)
                    })
                    service.post('api/v1/accounts', {}).then((response) => {
                        if (response.code === 0) {
                            var content = ''
                            for (let i = 0; i < response.data.length; i++) {
                                var o = response.data[i]
                                content += '<option value=' + o.id + '>' + o.name + '</option>'
                            }
                            $('#transferAccountId').html(content)
                            form.render('select')
                            layer.open({
                                type: 1,
                                title: false,//不显示标题栏
                                closeBtn: false,
                                area: ['500px', '400px'],
                                shade: 0.8,
                                id: 'LAY_account', //设定一个id，防止重复弹出
                                btn: ['确定'],
                                content: $('#choose_account'),
                                btnAlign: 'c',
                                moveType: 1,
                                success: function (layero) {
                                    var btn = layero.find('.layui-layer-btn');
                                    btn.click(function () {
                                        layer.confirm('确认将账户转移吗？', function (index) {
                                            service.post('api/v1/materialgroupsdel', {
                                                accountId: parseInt($('#transferAccountId').val()),
                                                searchWxinfoIds: param
                                            }).then((res) => {
                                                if (res.code === 200) {
                                                    layer.msg('转移成功', {offset: '45vh', icon: 1, time: 2000});
                                                    table.reload('wechat_list', {
                                                        where: {user_id: currAccountId}//设定异步数据接口的额外参数，任意设
                                                        , page: {
                                                            curr: 1 //重新从第 1 页开始
                                                        }
                                                    });
                                                } else {
                                                    layer.msg(res.msg, {offset: '45vh', icon: 5, time: 2000});
                                                }
                                            }).catch((err) => {
                                                layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                                            })
                                        })
                                    })
                                }
                            })
                        } else {
                            layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                        }
                    }).catch((err) => {
                        layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                    })
                }
            } else {
                layer.msg('请先选择要操作的数据', {offset: '45vh', icon: 5, time: 2000});
            }
        });

        //自定义验证规则
        form.verify({
            passwd: function (value) {
                if (value.length < 6 || value.length > 16) {
                    return '请输入密码，6到16个字符';
                }
            }
            , group: function (value) {
                if (value === '0') {
                    return '请选择分组';
                }
            }
        })


        form.on('submit(formSubmit)', function (data) {
            service.put('api/v1/account', {
                id: parseInt(data.field.id),
                passwd: data.field.passwd,
                groupId: parseInt(data.field.group),
                status: $('#account_info input[name=status]').prop('checked') ? 10 : 20
            }).then((response) => {
                if (response.code === 200) {
                    layer.msg('修改成功', {offset: '45vh', icon: 1, time: 2000});
                } else {
                    layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                }
            }).catch((err) => {
                layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
            })
            return false;
        });

        reloadList = function (reset, stayPage) {
            if (reset === true) {
                $('#group').val('0');
                $('#onStatus').val('0');
                $('#name').val('');
                layui.form.render("select");
            }
            if (stayPage === true) {
                table.reload('LAY-wechat-manage', {
                    where: this.getSearchData() //设定异步数据接口的额外参数，任意设
                });
            } else {
                table.reload('LAY-wechat-manage', {
                    where: this.getSearchData()//设定异步数据接口的额外参数，任意设
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };
    })
    ;
</script>
</body>
<script>
</script>
<script type="text/html" id="genderTpl">
    {{#  if(d.gender===10){ }}
    <span>女</span>
    {{#  } else if(d.gender===20) { }}
    <span>男</span>
    {{#  } else { }}
    <span>未填</span>
    {{# } }}
</script>
<div id="choose_account" class="p-20" style="display: none">
    <div class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label for="transferAccountId" class="layui-form-label">选择转移对象</label>
            <div class="layui-input-inline">
                <select id="transferAccountId" name="transferAccountId" style="layui-input-inline">
                </select>
            </div>
        </div>
    </div>
</div>
<div id="edit_account_info" class="p-20" style="display: none">
    <form class="layui-form layui-form-pane" id="edit_account_info_form" action="">
        <div class="layui-row">
            <div class="layui-form-item">
                <label class="layui-form-label">员工名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="name" value="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="text" name="passwd" lay-verify="passwd" autocomplete="off" placeholder="请设置密码" value=""
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-inline">
                    <input type="radio" lay-verify="gender" name="gender" value="10" title="男" checked>
                    <input type="radio" lay-verify="gender" name="gender" value="20" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">微信数量</label>
                <div class="layui-input-inline">
                    <input type="number" name="wxCount" lay-verify="wxCount" value="" autocomplete="off"
                           placeholder="请填写微信数量" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">到期时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="leaveTime" id="date" lay-verify="leaveTime" placeholder="请选择到期时间"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline">
                    <textarea name="remark" lay-verify="remark" placeholder="请填写备注" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12">
            <a class="layui-btn" lay-submit lay-filter="formSubmit">确认</a>
        </div>
    </form>
</div>
</html>
